<template>
	<!-- <common-swiper :list="bannerList"></common-swiper> -->
	<view class="container">
		<view class="navigatorbar">


			<view class="header">
				<view class="title">
					<view class="back-icon" @click="goBack">
						<img src="../../static/民族风-返回2.png" alt="" class="icon" />
					</view>
					<span class="tag">志愿活动广场</span>
				</view>
			</view>
			<view class="SearchPart">
				<view class="search">
					<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容"></uni-easyinput>
				</view>
				<button class="search-button" @click="search(value)">搜索</button>
			</view>

		</view>

		<view class="content">
			<scroll-view class="scroll1" scroll-y="true">
				<view class="content-list" :key=keyvalue>
					<view class="content-item" v-for="item in parameterModel" :key="item.id" @tap="goToDetail(item)">
						<span class="label">
							{{item.tag}}
						</span>
						<!-- <span class="label">
							科普活动
						</span> -->
						<span class="item-number">剩余名额 :{{item.remainder}}</span>
						<p class="item-name">{{item.activityName}}</p>
						<p class="item-organization">{{item.organization}}</p>
						<view class="item-bottom">
							<span class="item-time">{{item.beginTime}}-{{item.endTime}} </span>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<custom-tab-bar />
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
	import {
		apiGetActivityList1
	} from '../../api/volunteer.js';
	import{
		apiGetActivityList2
	}from'../../api/volunteer.js'
	
	const value = ref('')
	const goToDetail = (item) => {
		console.log(item.id);
		const recordsString = JSON.stringify(item.id);
		uni.navigateTo({
			// url: '../../pages/volunteerDetail/volunteerDetail?records=${encodeURIComponent(item.id)}',//页面传参，与下面的区别在于引号
			url: `../../pages/volunteerDetail/volunteerDetail?records=${encodeURIComponent(item.id)}` //页面传参,要先转成字符串
		})
	};
	//搜索活动
	var keyvalue = ref(0); //通过key值来重载列表
	const search = async (value) => {
		console.log(value);
		const parameterModel1 = ref({
			pageNo: '1',
			pageSize: '100',
			activityName: ''
})
		parameterModel1.value.activityName = value;
		console.log("p.value",parameterModel1.value)
		const res = await apiGetActivityList2(parameterModel1.value)	;
		console.log("res=",res)
		parameterModel1.value = res.data.records;
		// activityList.value.forEach((item) => {})
		console.log(parameterModel1.value);
		parameterModel.value = parameterModel1.value;
		keyvalue.value=keyvalue.value+1;

	}
	//作为生命周期函数
	const volunteerList = ref([]);
	const parameterModel = ref({
		pageNo: 1,
		pageSize: 200,
		activityName: ''
	})

	const getVolunteerList = async () => {
		const res = await apiGetActivityList1(parameterModel.value)
		parameterModel.value = res.data.records;
		// activityList.value.forEach((item) => {})
		console.log(parameterModel.value);

	}
	getVolunteerList();
	//返回上一页
	function goBack() {
		wx.navigateBack({
			delta: 1 // 返回上一页面
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		box-sizing: border-box;

		.header {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			padding: 0 20rpx;
			height: 45px;



			.title {
				margin-top: 25px;
				display: flex;
				width: 100%;
				align-items: center;
				font-size: 48rpx;
				font-weight: bold;
				color: #333333;

				.icon {
					position: absolute;
					height: 45px;
					width: 50px;
					margin-top: 20px;
					margin-left: -45px;
					
					left: 70px;
					bottom: 50px;
				}

				.tag {
					display: block;
					font-weight: 1200;
					padding: 6rpx 24rpx;
					margin-left: auto;
					margin-right: auto;
					font-size: 45rpx;
					color: #FFFFFF;
					border-radius: 10rpx;
					transform: skew(-15deg);
					background-image: linear-gradient(to right, #FF6600, #FF9900);
					box-shadow: 0 0 10rpx #FF9900;

				}

			}



		}

		.navigatorbar {
			position: fixed;
			border-radius: 0 0 10px 10px;
			z-index: 1000;
			background: url(https://registration-system1.oss-cn-guangzhou.aliyuncs.com/1ff9f852-89b4-4539-9399-203e652cbd17.png);
			
			background-size: cover;
			width: 100%;
			// 星空background: url(https://registration-system1.oss-cn-guangzhou.aliyuncs.com/ec421900-6130-4cf4-af01-96171f551e08.png);

		}

		.SearchPart {
			width: 100%;
			display: flex;
			
			
		}

		.search-button {
			position: relative;
            width: 20%;
			height: 37px;
			border-radius: 5px;
			bottom: -15px;
			line-height: 34px;
			margin-left: 5px;
			padding: 1px;
            border: #b1b1b0 solid 1px;
			font-weight: 400;
			font-size: 18px;
			color: gray;		
			}

		.search {
			padding: 10rpx 20rpx;
			margin-bottom: 10px;
			margin-top: 10px;
			width: 70%;
			
			


		}

		.content {
			padding: 30rpx;
			background-color: #f1f1f1;
			width: 100%;
			height: 100vh;
			position: fixed;

			.scroll1 {
				margin-top: 120px;
				height: 70vh;
				align-items: center;
				width: 95%;
				/* border: gray solid 2px; */
				background: transparent;
				position: fixed;
			}

			.content-list {
				width: 98%;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: hidden;
				border-radius: 30rpx;

				.content-item {
					width: 100%;
					height: 100%;
					background-color: #FFFFFF;
					margin-bottom: 4rpx;
					padding: 30rpx 40rpx;
					box-sizing: border-box;
					border-radius: 10px;

					.label {
						width: 100rpx;
						height: 40rpx;
						background-color: #FFECF0;
						border-radius: 20rpx;
						text-align: center;
						line-height: 40rpx;
						color: #FB4457;
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						margin-right: 20rpx;

					}

					.item-number {
						font-size: 26rpx;
						color: #FB4457;
						float: right;


					}

					.item-name {
						font-size: 34rpx;
						font-weight: bold;
						color: #000000e6;
						margin-top: 20rpx;
						margin-bottom: 10rpx;

					}

					.item-organization {
						font-size: 28rpx;
						color: #0006;
						margin-bottom: 10rpx;

					}

					.item-bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10rpx;
						color: #0006;
						font-size: 24rpx;

					}
				}
			}

		}

	}
</style>